<?php
// 初始化国际象棋棋盘
function initChessBoard() {
    $board = array_fill(0, 8, array_fill(0, 8, ''));

    // 白方棋子
    $board[0][0] = '♖';
    $board[0][1] = '♘';
    $board[0][2] = '♗';
    $board[0][3] = '♕';
    $board[0][4] = '♔';
    $board[0][5] = '♗';
    $board[0][6] = '♘';
    $board[0][7] = '♖';
    for ($i = 0; $i < 8; $i++) {
        $board[1][$i] = '♙';
    }

    // 黑方棋子
    $board[7][0] = '♜';
    $board[7][1] = '♞';
    $board[7][2] = '♝';
    $board[7][3] = '♛';
    $board[7][4] = '♚';
    $board[7][5] = '♝';
    $board[7][6] = '♞';
    $board[7][7] = '♜';
    for ($i = 0; $i < 8; $i++) {
        $board[6][$i] = '♟︎';
    }

    return $board;
}

$board = initChessBoard();
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国际象棋网页游戏</title>
    <style>
        body {
            text-align: center;
        }

        table {
            border-collapse: collapse;
            margin: 0 auto;
        }

        td {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            font-size: 30px;
        }

        .light {
            background-color: #f0d9b5;
        }

        .dark {
            background-color: #b58863;
        }
    </style>
</head>

<body>
    <h1>国际象棋网页游戏</h1>
    <table id="chess-board">
        <?php
        for ($i = 0; $i < 8; $i++) {
            echo '<tr>';
            for ($j = 0; $j < 8; $j++) {
                $cellClass = ($i + $j) % 2 === 0? 'light' : 'dark';
                echo '<td class="' . $cellClass. '" data-row="' . $i. '" data-col="' . $j. '">';
                echo $board[$i][$j];
                echo '</td>';
            }
            echo '</tr>';
        }
        ?>
    </table>

    <script>
        const board = document.getElementById('chess-board');
        let selectedPiece = null;

        board.addEventListener('click', function (event) {
            if (event.target.tagName === 'TD') {
                const cell = event.target;
                if (selectedPiece === null) {
                    if (cell.textContent!== '') {
                        selectedPiece = cell;
                        cell.style.border = '3px solid yellow';
                    }
                } else {
                    const fromRow = parseInt(selectedPiece.dataset.row);
                    const fromCol = parseInt(selectedPiece.dataset.col);
                    const toRow = parseInt(cell.dataset.row);
                    const toCol = parseInt(cell.dataset.col);

                    // 简单落子逻辑（未实现规则判断）
                    cell.textContent = selectedPiece.textContent;
                    selectedPiece.textContent = '';
                    selectedPiece.style.border = '1px solid #000';
                    selectedPiece = null;

                    // 这里可添加更多逻辑，如检查落子是否符合规则等
                }
            }
        });
    </script>
</body>

</html>